<template>
    <div class="flow-editor">
      <!-- 标签栏 -->
    <div class="tab-bar">
      <div
        v-for="project in projectsStore.projects"
        :key="project.id"
        class="tab"
        :class="{ active: project.id === currentProjectId }"
        @click="setCurrentProject(project.id)"
      >
        <div v-if="project.loaded">{{ project.name }}</div>
        
        <button @click="closeProject(project.id)" class="close-btn">X</button>
      </div>

    </div>
    <hr/>

    <div class="editor">
      <Project v-if="currentProjectId" :projectId="currentProjectId" />
    </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { useProjectsStore } from '../stores/projectsStore';
  import { defineComponent, ref ,computed, onMounted} from 'vue';

  import Project from '../components/Project.vue'; // 替换为正确的路径

  const projectsStore = useProjectsStore();
  const currentProjectId = computed(() => {return projectsStore.currentProjectId});

  onMounted(() => {
    projectsStore.initializeProjects();
  })
  
  // 设置当前选中的Project
  const setCurrentProject = (id: string) => {
    projectsStore.setCurrentProject(id);
  };
  
  // 删除项目
  const closeProject = (projectId: string) => {
    projectsStore.removeProject(projectId);  // 从store移除项目
  };
  
  // 添加新的Project
  const addNewProject = () => {
    projectsStore.addProject('New Project', {initialEdges:Object(), initialNodes:Object()});
  };
  </script>
  
  <style scoped>
  .flow-editor {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding:2px 2px;
  }
  
  .tab-bar {
    height: 2rem;
    display: flex;
    flex-wrap: wrap;
  }
  
  .tab {
    background: #f0f0f0;
    margin-right: 10px;
    height: 100%;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .tab.active {
    background: #d0d0d0;
  }
  .close-btn{
    border: none;
    margin-left: 10px;
  }
  
  .editor {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  
  textarea {
    width: 100%;
    height: 300px;
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ddd;
  }
  </style>
  